<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
      }
      #app {
        display: flex;
        flex-direction: column;
      }
      .main {
        flex: 1;
        overflow: auto;
      }
      .header,
      .footer {
        background: red;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- vue生效的代码区域 -->
    <div id="app">
      <header class="header"></header>
      <main class="main"></main>
      <footer class="footer"></footer>
    </div>

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script>
      // 数据驱动dom (所有的效果，能用数据，都尽量不用直接操作dom)
      // v-show v-if都能做显示隐藏，但是v-show是借用了 display:none.
      // 如果是频繁切换的场景，建议使用v-show
      // v-if用在不太常切换的场景下

      const app = new Vue({
        el: '#app', // 挂载让vue生效的元素
        data: {
          title: 'Hello Vue!',
          arr: ['1', '2', '3'],
          src: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
          show: true,
          isHeadBoy: true,
          value: '我是默认数据',
          check: true,
          checkTwo: true,
          // 富文本数据渲染
          htmlText: '<h1>标题:</h1> <div style="color:red">我是内容</div>',
        },
        created() {},
        methods: {
          handleShowClick() {
            this.show = !this.show
          },
          handleShow() {
            this.isHeadBoy = !this.isHeadBoy
          },
          showClick() {
            this.show = !this.show
          },
        },
      })
    </script>
  </body>
</html>
